<template>
  <div>
    <div class="box">
      <el-table
        id="tab"
        :data="tableData"
        border
        style="width: 100%;"
      >

        <el-table-column
          id="tab"
          prop="title"
          label=""
         
          width="210"
          style="color:red !important"
        />

        <el-table-column
          prop="date"
          label="日期"
        />
        <el-table-column
          prop="money"
          label="支付金额"
        />
        <el-table-column
          prop="paycount"
          label="支付笔数"
        />
        <el-table-column
          prop="refund"
          label="退款金额"
        />
        <el-table-column
          prop="refundCount"
          label="退款笔数"
        />
        <el-table-column
          prop="receivable"
          label="实际应收金额"
        />
        <el-table-column
          prop="unusualCount"
          label="对账异常数"
        />
      
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        title: '(起始日期-结束日期)默认当日',
        date: '2016-05-02',
        money: '999',
        paycount: '999',
        refund: 999,
        refundCount:999,
        receivable:999,
        unusualCount:999,
      }, {
         title: '本月',
        date: '2016-05-02',
        money: '999',
        paycount: '999',
        refund: 999,
        refundCount:999,
        receivable:999,
        unusualCount:999,
      }, {
        title: '今年',
        date: '2016-05-02',
        money: '999',
        paycount: '999',
        refund: 999,
        refundCount:999,
        receivable:999,
       unusualCount:999,
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  padding: 32px 28px;
  background: #FFFFFF;
}
.el-table{
  margin: 0px;
  padding: 0px;
  // width: 100%;
  width: 1550px;
  height: 100%;
 border-radius: 2px;
 background: #FFFFFF;

}
::v-deep.has-gutter tr th{
  background: #FAFAFA !important;
}
::v-deep.has-gutter cell{
  font-size: 14px !important;
  font-family: HelveticaNeue;
  color: rgba(0, 0, 0, 0.65);
}
::v-deep .el-table_1_column_1{
  background: #FAFAFA !important;

}
::v-deep.el-table .cell{
  text-align: center;
  font-size: 14px !important;
  line-height: 22px;
}
::v-deep.el-table__row .el-table_1_column_1{
  background: #FAFAFA !important;
  font-size: 14px !important;
  font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 22px;
}

::v-deep.el-table__row .el-table_1_column_1 .cell{

 font-weight: bold !important;
}
::v-deep.has-gutter{
font-size: 14px !important;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
background: #FAFAFA !important;
}
// ::v-deep.el-table_3_column_17{
//   background: #FAFAFA !important;
// }
// ::v-deep.el-table_1_column_1  {
//    background: red !important;
// }
::v-deeptd:nth-of-type(1){
background: #FAFAFA !important;
}


</style>
